<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-tabs v-model="user_type" @tab-click="getList(1)">
          <el-tab-pane :label="$t('allusers')" name="" />
         <!-- <el-tab-pane :label="$t('wechatusers')" name="wechat" />
          <el-tab-pane :label="$t('appletuser')" name="routine" /> -->
          <el-tab-pane :label="$t('h5user')" name="h5" />
        </el-tabs>
        <div class="container">
          <el-form
            inline
            size="small"
            :label-position="labelPosition"
            label-width="100px"
          >
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                <el-col v-bind="grid">
                  <el-form-item :label="$t('usernickname')">
                    <el-input
                      v-model="userFrom.nickname"
                      :placeholder="$t('please10')"
                      clearable
                      class="selWidth"
                    />
                  </el-form-item>
                </el-col>
              </el-col>
              <template v-if="collapse">
                <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                  <el-col v-bind="grid">
                    <el-form-item :label="$t('usertag')">
                      <el-select
                        v-model="userFrom.label_id"
                        :placeholder="$t('pleaseselect')"
                        class="selWidth"
                        clearable
                        filterable
                      >
                        <el-option value="">{{ $t("all") }}</el-option>
                        <el-option
                          v-for="(item, index) in labelLists"
                          :key="index"
                          :value="item.label_id"
                          :label="item.label_name"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                  <el-col v-bind="grid">
                    <el-form-item :label="$t('gender')">
                      <el-radio-group
                        v-model="userFrom.sex"
                        type="button"
                        class="selWidth"
                      >
                        <el-radio-button label="">
                          <span>{{ $t("all") }}</span>
                        </el-radio-button>
                        <el-radio-button label="1">
                          <span>{{ $t("male") }}</span>
                        </el-radio-button>
                        <el-radio-button label="2">
                          <span>{{ $t("female") }}</span>
                        </el-radio-button>
                        <el-radio-button label="0">
                          <span>{{ $t("secrecy") }}</span>
                        </el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col v-bind="grid">
                    <el-form-item :label="$t('identity')">
                      <el-radio-group
                        v-model="userFrom.is_promoter"
                        type="button"
                        class="selWidth"
                      >
                        <el-radio-button label="">
                          <span>{{ $t("all") }}</span>
                        </el-radio-button>
                        <el-radio-button label="1">
                          <span>{{ $t("promoter") }}</span>
                        </el-radio-button>
                        <el-radio-button label="0">
                          <span>{{ $t("ordinaryusers") }}</span>
                        </el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                  <el-col v-bind="grid">
                    <el-form-item :label="$t('visits')">
                      <el-select
                        v-model="userFrom.user_time_type"
                        :placeholder="$t('pleaseselect')"
                        class="selWidth"
                        clearable
                      >
                        <el-option value="visit" :label="$t('lastvisit')" />
                        <el-option value="add_time" :label="$t('firstvisit')" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col v-bind="grid">
                    <el-form-item :label="$t('consumption')">
                      <el-select
                        v-model="userFrom.pay_count"
                        :placeholder="$t('pleaseselect')"
                        class="selWidth"
                        clearable
                      >
                        <el-option value="-1" :label="$t('0times')"></el-option>
                        <el-option value="0" label="1次以上"></el-option>
                        <el-option value="1" label="2次以上"></el-option>
                        <el-option value="2" label="3次以上"></el-option>
                        <el-option value="3" label="4次以上"></el-option>
                        <el-option value="4" label="5次以上"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                  <el-col v-bind="grid">
                    <el-form-item :label="$t('accesstime')" class="timeBox">
                      <el-date-picker
                        v-model="timeVal"
                        value-format="yyyy/MM/dd"
                        align="right"
                        unlink-panels
                        format="yyyy/MM/dd"
                        size="small"
                        type="daterange"
                        placement="bottom-end"
                        :placeholder="$t('customtime')"
                        class="selWidth"
                        :picker-options="pickerOptions"
                        @change="onchangeTime"
                      />
                    </el-form-item>
                  </el-col>
                </el-col>
              </template>
              <el-col
                :xs="24"
                :sm="24"
                :md="24"
                :lg="6"
                :xl="6"
                class="text-right userFrom"
              >
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="ios-search"
                    label="default"
                    class="mr15"
                    size="small"
                    @click="userSearchs"
                    >{{ $t("search") }}</el-button
                  >
                  <el-button
                    class="ResetSearch mr10"
                    size="small"
                    type="reset"
                    @click="reset('userFrom')"
                    >{{ $t("reset") }}</el-button
                  >
                  <a class="ivu-ml-8" @click="collapse = !collapse">
                    <template v-if="!collapse">
                      {{ $t("open") }} <i class="el-icon-arrow-down" />
                    </template>
                    <template v-else>
                      {{ $t("stow") }} <i class="el-icon-arrow-up" />
                    </template>
                  </a>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div>
        <el-button
          type="primary"
          icon="ios-search"
          label="default"
          class="mr15"
          size="small"
          @click="sendCoupon"
          style="margin-bottom: 20px"
          >{{ $t("sendcoupon") }}</el-button
        >
        <el-alert
          v-if="checkedIds.length > 0 || allCheck"
          :title="
            allCheck
              ? `已选择  ${tableData.total}  项`
              : `已选择  ${checkedIds.length}  项`
          "
          type="info"
          show-icon
        />
      </div>
      <el-table
        v-loading="listLoading"
        :data="tableData.data"
        style="width: 100%"
        size="small"
      >
        <el-table-column width="50">
          <template slot="header" slot-scope="scope">
            <el-popover
              placement="top-start"
              width="100"
              trigger="hover"
              class="tabPop"
            >
              <div>
                <span
                  class="spBlock onHand"
                  :class="{ check: chkName === 'dan' }"
                  @click="onHandle('dan', scope.$index)"
                  >{{ $t("selectthispage") }}</span
                >
                <span
                  class="spBlock onHand"
                  :class="{ check: chkName === 'duo' }"
                  @click="onHandle('duo')"
                  >{{ $t("selectall") }}</span
                >
              </div>
              <el-checkbox
                slot="reference"
                :value="
                  (chkName === 'dan' &&
                    checkedPage.indexOf(userFrom.page) > -1) ||
                  chkName === 'duo'
                "
                @change="changeType"
              />
            </el-popover>
          </template>
          <template slot-scope="scope">
            <el-checkbox
              :value="
                checkedIds.indexOf(scope.row.uid) > -1 ||
                (chkName === 'duo' && noChecked.indexOf(scope.row.uid) === -1)
              "
              @change="(v) => changeOne(v, scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="user_merchant_id" label="ID" min-width="60" />
        <el-table-column :label="$t('headportrait')" min-width="50">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image
                style="width: 36px; height: 36px"
                :src="scope.row.avatar ? scope.row.avatar : moren"
                :preview-src-list="[scope.row.avatar || moren]"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('nickname')" min-width="90">
          <template slot-scope="{ row }">
            <div class="acea-row">
              <i
                v-show="row.sex === 1"
                class="el-icon-male mr5"
                style="font-size: 15px; margin-top: 3px; color: #2db7f5"
              />
              <i
                v-show="row.sex === 2"
                class="el-icon-female mr5"
                style="font-size: 15px; margin-top: 3px; color: #ed4014"
              />
              <div v-text="row.nickname" />
            </div>
            <div v-show="row.vip_name" class="vipName">{{ row.vip_name }}</div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('firstvisittime')"
          prop="create_time"
          min-width="120"
        />
        <el-table-column :label="$t('customertype')" min-width="100">
          <template slot-scope="{ row }">
            <span>{{
              row.user_type === "routine"
                ? $t("applets")
                : row.user_type === "wechat"
                ? $t("officialaccount")
                : "H5"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('firstconsumptiontime')"
          prop="first_pay_time"
          min-width="120"
        />
        <el-table-column
          :label="$t('recentconsumptiontime')"
          prop="last_pay_time"
          min-width="120"
        />
        <el-table-column :label="$t('label')" min-width="100">
          <template slot-scope="{ row }">
            <span> {{ row.label.join("、") }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('operation')" min-width="130" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              class="mr10"
              @click="onDetails(scope.row)"
              >{{ $t("details") }}</el-button
            >
            <el-button
              type="text"
              size="small"
              class="mr10"
              @click="setLabel(scope.row.user_merchant_id)"
              >{{ $t("setlabel") }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="userFrom.limit"
          :current-page="userFrom.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <!--会员详情-->
    <el-dialog
      v-if="visibleDetail"
      :title="$t('userdetails')"
      :visible.sync="visibleDetail"
      width="1000px"
      :before-close="Close"
    >
      <user-details
        v-if="visibleDetail"
        ref="userDetails"
        :uid="uid"
        :row="row"
      />
    </el-dialog>
    <!-- 选择优惠券 -->
    <el-dialog
      v-if="visibleCoupon"
      :title="$t('couponlist')"
      :visible.sync="visibleCoupon"
      width="1000px"
    >
      <coupon-List
        v-if="visibleCoupon"
        ref="couponList"
        :couponForm="couponForm"
        :checkedIds="checkedIds"
        :allCheck="allCheck"
        :userFrom="userFrom"
        @sendSuccess="sendSuccess"
      />
    </el-dialog>
  </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { userLstApi, changeGroupApi, labelLstApi } from "@/api/user";
import userDetails from "./userDetails";
import couponList from "./couponList";
export default {
  name: "UserList",
  components: {
    userDetails,
    couponList,
  },
  data() {
    return {
      moren: require("@/assets/images/f.png"),
      pickerOptions: {
        shortcuts: [
          {
            text: this.$t("today"),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(
                new Date(
                  new Date().getFullYear(),
                  new Date().getMonth(),
                  new Date().getDate()
                )
              );
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: this.$t("yesterday"),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(
                start.setTime(
                  new Date(
                    new Date().getFullYear(),
                    new Date().getMonth(),
                    new Date().getDate() - 1
                  )
                )
              );
              end.setTime(
                end.setTime(
                  new Date(
                    new Date().getFullYear(),
                    new Date().getMonth(),
                    new Date().getDate()
                  )
                )
              );
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: this.$t("last7days"),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: this.$t("last30days"),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: this.$t("thismonth"),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(
                start.setTime(
                  new Date(new Date().getFullYear(), new Date().getMonth(), 1)
                )
              );
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: this.$t("thisyear"),
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(
                start.setTime(new Date(new Date().getFullYear(), 0, 1))
              );
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      timeVal: [],
      collapse: false,
      visibleDetail: false,
      visibleCoupon: false,
      maxCols: 3,
      isShowSend: true,
      visible: false,
      user_type: "",
      tableData: {
        data: [],
        total: 0,
      },
      listLoading: true,
      wechatIds: "",
      row: "",
      labelPosition: "right",
      userProps: {
        children: "children",
        label: "name",
        value: "name",
      },
      userFrom: {
        label_id: "",
        user_type: "",
        sex: "",
        is_promoter: "",
        country: "",
        pay_count: "",
        user_time_type: "",
        user_time: "",
        nickname: "",
        province: "",
        city: "",
        page: 1,
        limit: 20,
        group_id: "",
      },
      couponForm: {
        用户标签: "",
        用户类型: "",
        性别: "",
        身份: "",
        消费情况: "",
        访问情况: "",
        访问时间: "",
        昵称: "",
      },
      address: [],
      grid: {
        xl: 8,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24,
      },
      grid2: {
        xl: 18,
        lg: 16,
        md: 12,
        sm: 24,
        xs: 24,
      },
      grid3: {
        xl: 8,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24,
      },
      addresData: [],
      groupList: [],
      labelLists: [],
      chkName: "",
      checkedPage: [],
      checkedIds: [], // 订单当前页选中的数据
      noChecked: [], // 订单全选状态下当前页不选中的数据
      allCheck: false,
    };
  },
  mounted() {
    this.getTagList();
    this.getList("");
  },
  methods: {
    // 用户
    onHandle(name) {
      this.chkName = this.chkName === name ? "" : name;
      this.changeType(!(this.chkName === ""));
    },
    changeType(v) {
      if (v) {
        if (!this.chkName) {
          this.chkName = "dan";
        }
      } else {
        this.chkName = "";
        this.allCheck = false;
      }
      const index = this.checkedPage.indexOf(this.userFrom.page);
      if (this.chkName === "dan") {
        this.checkedPage.push(this.userFrom.page);
      } else if (index > -1) {
        this.checkedPage.splice(index, 1);
      }
      this.syncCheckedId();
    },
    syncCheckedId() {
      const ids = this.tableData.data.map((v) => v.uid);
      if (this.chkName === "duo") {
        this.checkedIds = [];
        this.allCheck = true;
      } else if (this.chkName === "dan") {
        this.allCheck = false;
        ids.forEach((id) => {
          const index = this.checkedIds.indexOf(id);
          if (index === -1) {
            this.checkedIds.push(id);
          }
        });
      } else {
        ids.forEach((id) => {
          const index = this.checkedIds.indexOf(id);
          if (index > -1) {
            this.checkedIds.splice(index, 1);
          }
        });
      }
    },
    // 发送优惠券
    sendCoupon() {
      if (this.checkedIds.length == 0 && this.allCheck == false) {
        this.$message.warning(this.$t("please167"));
      } else {
        this.visibleCoupon = true;
      }
    },
    // 分开选择
    changeOne(v, user) {
      if (v) {
        if (this.chkName === "duo") {
          const index = this.noChecked.indexOf(user.uid);
          if (index > -1) this.noChecked.splice(index, 1);
        } else {
          const index = this.checkedIds.indexOf(user.uid);
          if (index === -1) this.checkedIds.push(user.uid);
        }
      } else {
        if (this.chkName === "duo") {
          const index = this.noChecked.indexOf(user.uid);
          if (index === -1) this.noChecked.push(user.uid);
        } else {
          const index = this.checkedIds.indexOf(user.uid);
          if (index > -1) this.checkedIds.splice(index, 1);
        }
      }
    },
    sendSuccess() {
      this.visibleCoupon = false;
    },
    getCoupounParmas() {
      let label_id = this.userFrom.label_id == "" ? "" : this.getLabelValue(),
        user_type = this.findKey(this.userFrom.user_type, {
          "": "",
          微信用户: "wechat",
          小程序用户: "routine",
          H5用户: "h5",
        }),
        sex = this.findKey(this.userFrom.sex, {
          男: "1",
          女: "2",
          保密: "0",
          "": "",
        }),
        pay_count = this.findKey(this.userFrom.sex, {
          "0次": "-1",
          "1次以上": "0",
          "2次以上": "1",
          "3次以上": "2",
          "4次以上": "3",
          "5次以上": "4",
          "": "",
        }),
        is_promoter = this.findKey(this.userFrom.is_promoter, {
          推广员: "1",
          普通用户: "0",
          "": "",
        }),
        user_time_type =
          this.userFrom.user_time_type == "visit"
            ? this.$t("lastvisit")
            : this.userFrom.user_time_type == "add_time"
            ? this.$t("firstvisit")
            : "";
      this.couponForm = {
        用户标签: label_id,
        用户类型: user_type,
        性别: sex,
        消费情况: pay_count,
        身份: is_promoter,
        访问情况: user_time_type,
        访问时间: this.userFrom.user_time,
        昵称: this.userFrom.nickname,
      };
    },
    findKey(value, data, compare = (a, b) => a === b) {
      return Object.keys(data).find((k) => compare(data[k], value));
    },
    getLabelValue() {
      let labelName = "";
      for (let i = 0; i < this.labelLists.length; i++) {
        if (this.labelLists[i]["label_id"] === this.userFrom.label_id) {
          labelName = this.labelLists[i]["label_name"];
          return labelName;
        }
      }
    },

    // 选择时间
    selectChange(tab) {
      this.timeVal = [];
      this.userFrom.user_time = tab;
      this.getList("");
    },
    // 具体日期
    onchangeTime(e) {
      this.timeVal = e;
      this.userFrom.user_time = e ? this.timeVal.join("-") : "";
    },
    userSearchs() {
      if (this.userFrom.user_time_type && !this.userFrom.user_time) {
        this.$message.error(this.$t("please168"));
      } else if (!this.userFrom.user_time_type && this.userFrom.user_time) {
        this.$message.error(this.$t("please169"));
      } else {
        this.getList(1);
      }
    },
    // 标签列表
    getTagList() {
      labelLstApi({
        page: 1,
        limit: 9999,
        all: 1,
      })
        .then((res) => {
          this.labelLists = res.data.list;
        })
        .catch((res) => {
          this.$message.error(res.message);
        });
    },
    // 详情
    onDetails(row) {
      this.row = row;
      this.uid = row.uid;
      this.visibleDetail = true;
    },
    Close() {
      this.visibleDetail = false;
    },
    handleClose() {
      this.visible = false;
    },

    // 修改标签
    setLabel(id) {
      this.$modalForm(changeGroupApi(id)).then(() => this.getList(""));
    },
    // 列表
    getList(num) {
      this.listLoading = true;
      this.userFrom.page = num ? num : this.userFrom.page;
      this.userFrom.user_type = this.user_type;
      this.userFrom.province = this.address[0];
      this.userFrom.city = this.address[1];
      if (this.userFrom.user_type === "0") this.userFrom.user_type = "";
      userLstApi(this.userFrom)
        .then((res) => {
          this.tableData.data = res.data.list;
          this.tableData.total = res.data.count;
          this.listLoading = false;
          this.getCoupounParmas();
        })
        .catch((res) => {
          this.listLoading = false;
          this.$message.error(res.message);
        });
    },
    pageChange(page) {
      this.userFrom.page = page;
      this.getList("");
    },
    handleSizeChange(val) {
      this.userFrom.limit = val;
      this.getList("");
    },
    handleClick() {
      this.getList("");
    },

    // 重置
    reset() {
      (this.userFrom = {
        label_id: "",
        user_type: "",
        sex: "",
        is_promoter: "",
        country: "",
        pay_count: "",
        user_time_type: "",
        user_time: "",
        nickname: "",
        province: "",
        city: "",
        page: 1,
        limit: 20,
        group_id: "",
        date: "",
      }),
        (this.timeVal = []);
    },
  },
};
</script>

<style lang="scss" scoped>
.spBlock {
  cursor: pointer;
  display: block;
  padding: 5px 0;
}

.check {
  color: #00a2d4;
}
.selWidth {
  width: 100% !important;
}

.dia {
  ::v-deep .el-dialog__body {
    height: 700px !important;
  }
}

.text-right {
  text-align: right;
}

.container {
  min-width: 821px;

  ::v-deep.el-form-item {
    width: 100%;
  }

  ::v-deep.el-form-item__content {
    width: 72%;
  }
}

.vipName {
  color: #dab176;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
  font-size: 12px;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 33.33%;
}

::v-deep[type="reset"],
[type="submit"],
button,
html [type="button"] {
  -webkit-appearance: none !important;
}
.box-container {
  overflow: hidden;
}
.box-container .list {
  line-height: 40px;
  display: flex;
  align-items: center;
}

.box-container .list .name {
  display: inline-block;
  width: 100px;
  text-align: right;
  color: #606266;
}
.box-container .list .blue {
  color: #1890ff;
}
//.box-container .list.image {
//  margin-bottom: 40px;
//}
//.box-container .list.image img {
//  position: relative;
//  top: 40px;
//}
</style>
